:root {
  --main-bg: #ffffff;
  --beige: #f0eae2;
  --dark-beige: #e6dbcc;
  --light-beige: #f8f5f1;
  --red: #c95454;
  --text: #2d2c2c;
  --heading-text: #000000;
  --light-text: #949494;

  --font-headings: 'Source Serif Pro', serif;
  --font-main: 'DM Sans', sans-serif;
  --font-monospace: MonoLisa, 'Source Code Pro', monospace;

  --foldgutter-width: 1.8rem;

  /* #988982 */

  /* Dark Mode */
  --dark-bg: #2f2a27;
  --dark-secondary: #38312e;
  --dark-alternate: #988982;
  --dark-light-text: #473e3a;
  --dark-lightness: #bbb1ac;

  /* Headings */
  --h1: 2.5em;
  --h2: 2em;
}

.theme-dark {
  --background-primary: var(--dark-bg);
  --background-primary-alt: var(--dark-secondary);
  --background-secondary: var(--dark-bg);
  --background-secondary-alt: var(--dark-secondary);
  --background-modifier-border: var(--dark-secondary);
  --background-modifier-form-field: var(--dark-bg);
  --background-modifier-form-field-highlighted: var(--dark-bg);
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
  --background-modifier-success: var(--red);
  --background-modifier-error: var(--red);
  --background-modifier-error-rgb: 230, 135, 135;
  --background-modifier-error-hover: #2c1e1e;
  --background-modifier-cover: rgba(0, 0, 0, 0.8);
  --text-accent: var(--red);
  --text-accent-hover: var(--red);
  --text-normal: var(--main-bg);
  --text-muted: var(--beige);
  --text-muted-rgb: 136, 136, 136;
  --text-faint: var(--light-text);
  --text-error: var(--red);
  --text-error-hover: var(--red);
  --text-highlight-bg: #756B13;
  --text-highlight-bg-active: #756B13;
  --text-selection: var(--dark-lightness);
  --text-on-accent: #f2f2f2;
  --interactive-normal: #f2f3f5;
  --interactive-hover: #e9e9e9;
  --interactive-accent: var(--red);
  --interactive-accent-rgb: 123, 108, 217;
  --interactive-accent-hover: var(--red);
  --interactive-success: #06b43c;
  --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
  --scrollbar-bg: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
  --highlight-mix-blend-mode: darken;
  --alternate-lights: var(--dark-alternate);
  --nav-text-focus-color: var(--beige);
  --modal-buttons: var(--main-bg);
  --pre-bg: var(--background-primary-alt);
  --handle-icon: var(--main-bg);
}

.theme-light {
  --background-primary: var(--main-bg);
  --background-primary-alt: var(--beige);
  --background-secondary: var(--main-bg);
  --background-secondary-alt: var(--beige);
  --background-modifier-border: var(--beige);
  --background-modifier-form-field: var(--main-bg);
  --background-modifier-form-field-highlighted: var(--main-bg);
  --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
  --background-modifier-success: var(--red);
  --background-modifier-error: var(--red);
  --background-modifier-error-rgb: 230, 135, 135;
  --background-modifier-error-hover: #2c1e1e;
  --background-modifier-cover: rgba(0, 0, 0, 0.8);
  --text-accent: var(--red);
  --text-accent-hover: var(--red);
  --text-normal: var(--text);
  --text-muted: var(--light-text);
  --text-muted-rgb: 136, 136, 136;
  --text-faint: var(--light-text);
  --text-error: var(--red);
  --text-error-hover: var(--red);
  --text-highlight-bg: #f3e118;
  --text-highlight-bg-active: #f3e118;
  --text-selection: var(--dark-beige);
  --text-on-accent: #f2f2f2;
  --interactive-normal: #f2f3f5;
  --interactive-hover: #e9e9e9;
  --interactive-accent: var(--red);
  --interactive-accent-rgb: 123, 108, 217;
  --interactive-accent-hover: var(--red);
  --interactive-success: #197300;
  --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
  --scrollbar-bg: rgba(0, 0, 0, 0.05);
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
  --highlight-mix-blend-mode: darken;
  --alternate-lights: var(--light-beige);
  --nav-text-focus-color: var(--main-bg);
  --modal-buttons: var(--text-faint);
  --pre-bg: var(--light-beige);
  --handle-icon: #000000;
}

html,
body {
  font-size: 20px !important;
  font-family: var(--font-main);
  color: var(--text-normal);
}

.workspace-split.mod-root .view-content {
  border-radius: 10px !important;
}

.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
  font-family: var(--font-headings);
  line-height: 1;
}

.workspace-leaf-resize-handle {
  background-color: transparent;
  height: 100% !important;
}

.workspace-leaf-resize-handle:hover {
  background-color: var(--dark-beige);
  opacity: 0.5;
}

.workspace-ribbon.mod-right.is-collapsed {
  border-left: 0;
}

.workspace-ribbon,
.workspace-tabs,
.workspace-tab-container-before.is-before-active,
.workspace-tab-header.is-after-active,
.workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
.workspace-tabs .workspace-leaf,
.workspace-tab-header.is-active,
.workspace-ribbon.is-collapsed,
.status-bar {
  background: var(--background-primary-alt);
  color: var(--text-muted);
}

.workspace-tab-header.is-active,
.mod-active .view-header-icon {
  color: var(--handle-icon);
}

.workspace-tab-container-before.is-before-active .workspace-tab-header-inner,
.workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
.workspace-tab-header.is-after-active .workspace-tab-header-inner,
.workspace-tab-header.is-before-active .workspace-tab-header-inner {
  border-radius: 0;
}

.view-header,
.workspace-split.mod-root>.workspace-leaf:first-of-type:last-of-type .view-header {
  background: var(--background-primary-alt);
  border-right: 10px solid var(--background-primary-alt);
  border-left: 10px solid var(--background-primary-alt);
}

.workspace-leaf.mod-active .view-header {
  border-right: 10px solid var(--background-primary-alt);
  border-left: 10px solid var(--background-primary-alt);
  border-bottom: 1px solid var(--red);
  border-radius: 10px;
  transition: border-bottom 300ms linear, border-right 300ms linear,
    border-left 300ms linear;
}

.view-header-title-container:after,
.workspace-split.mod-root>.workspace-leaf:first-of-type:last-of-type.mod-active .view-header-title-container:after {
  background: linear-gradient(to right,
      transparent,
      var(--background-primary-alt));
}

.suggestion-item.is-selected {
  background-color: var(--background-primary-alt);
  border-radius: 5px;
}

body:not(.is-mobile) .modal-container .modal-bg {
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
}

.setting-add-hotkey-button,
.setting-restore-hotkey-button {
  color: var(--modal-buttons);
}

.cm-header-1 {
  font-weight: 700 !important;
}

.CodeMirror-linenumber,
.cm-formatting {
  font-family: var(--font-monospace) !important;
  color: var(--text-muted);
  opacity: 0.8;
}

.markdown-preview-section,
.markdown-source-view {
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.markdown-preview-section h1 {
  font-family: var(--font-headings);
  font-size: var(--h1);
}

.HyperMD-codeblock {
  line-height: 1.5 !important;
  color: var(--red) !important;
}

.nav-file-title,
.nav-folder-title {
  margin-bottom: 5px;
}

.nav-file:hover {
  color: var(--background-primary) !important;
}

.nav-file-title.is-active,
.nav-folder-title.is-active,
.nav-file-title.is-active:hover,
.nav-folder-title.is-active:hover {
  background: var(--red) !important;
  color: var(--nav-text-focus-color) !important;
}

.markdown-preview-view pre {
  border: 2px solid var(--background-primary-alt);
  border-radius: 10px;
}

.markdown-preview-view ul {
  padding-left: 30px;
}

.markdown-preview-view ol {
  padding-left: 25px;
}

.markdown-preview-view ul li {
  padding-bottom: 5px;
}

.markdown-preview-view li ul {
  padding-top: 5px;
}

.cm-inline-code {
  font-weight: 500;
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg,
.cm-s-obsidian div.HyperMD-codeblock-end-bg,
.cm-s-obsidian div.HyperMD-codeblock-bg {
  background: var(--pre-bg);
}

/*/ var(--background-primary-alt);  for pre*/

.copy-code-button,
.document-search-button {
  background: var(--background-primary);
}

.copy-code-button:hover,
.document-search-button:hover {
  background: var(--red);
  color: var(--main-bg);
}

.cm-quote:not(.cm-hmd-internal-link):not(.cm-formatting-link):not(.cm-formatting) {
  color: var(--text-normal) !important;
}

thead,
.frontmatter-container {
  background: var(--alternate-lights);
}

.markdown-preview-view blockquote {
  border: 0px solid;
  border-color: var(--red) !important;
  border-left-width: 2px !important;
  line-height: 1.5;
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

blockquote {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.CodeMirror-foldgutter {
  width: var(--foldgutter-width);
}

.CodeMirror-guttermarker-subtle {
  font-size: 0.8em;
  text-align: center;
  opacity: 0.5;
  line-height: var(--foldgutter-width);
  height: var(--foldgutter-width);
  border-radius: 3px;
}

.CodeMirror-guttermarker-subtle:hover {
  opacity: 1;
  background-color: var(--background-primary-alt);
}

.CodeMirror-foldgutter-open::after {
  content: '\25BC';
}

.CodeMirror-foldgutter-folded::after {
  content: '\25BA';
}

.markdown-preview-view .internal-link.is-unresolved {
  color: var(--text-muted);
  opacity: 1;
}

.markdown-preview-view .task-list-item-checkbox {
  filter: none;
}

input[type='checkbox'] {
  appearance: none;
  border-radius: 3px;
  border: 1px solid var(--text-muted);
  cursor: pointer;
}

input[type='checkbox']:focus {
  outline: 0;
}

input[type='checkbox']:checked {
  background-color: var(--red);
  border: 1px solid var(--red);
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}

.nav-buttons-container {
  border-radius: 5px;
}

.theme-dark .nav-buttons-container {
  background: var(--background-primary);
}

.theme-light .nav-buttons-container {
  background: var(--alternate-lights);
}

.nav-action-button {
  margin: 0 3px;
  transition: background-image 300ms linear;
}

.side-dock-ribbon-action:hover {
  color: var(--text-normal);
}

.markdown-preview-view .task-list-item-checkbox {
  margin-left: -25px;
}

.markdown-preview-view .task-list-item {
  padding-inline-start: 25px;
}

.graph-control-section input[type='range'] {
  background: var(--background-primary);
}

.popover.hover-popover {
  font-family: var(--font-headings);
  overflow: hidden;
  border: 1px solid var(--background-primary-alt);
}

.popover.hover-popover:hover {
  background: var(--background-primary);
  border: 1px solid var(--red);
  transition: border 300ms linear;
}

.tooltip {
  background-color: var(--red);
  color: var(--background-primary);
  word-wrap: break-word;
}

.tooltip .tooltip-arrow {
  border-bottom: 5px solid var(--red);
}

.tooltip.mod-right .tooltip-arrow {
  border-right: 5px solid var(--red);
}

.tooltip.mod-left .tooltip-arrow {
  border-left: 5px solid var(--red);
}

.tooltip.mod-top .tooltip-arrow {
  border-top: 5px solid var(--red);
}

.titlebar-text {
  top: -2px;
}

.titlebar-button {
  opacity: 1;
  transform: scale(1.2);
}

.titlebar-button:hover {
  color: var(--background-primary);
}

.titlebar-button svg {
  vertical-align: baseline;
}

*::-webkit-scrollbar-track {
  background: var(--background-primary-alt);
  opacity: 0;
}

*::-webkit-scrollbar-thumb {
  background: var(--dark-beige);
  border-radius: 10px;
  border: 1px solid var(--background-primary-alt);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--alternate-lights);
}

.view-content *::-webkit-scrollbar-track {
  background: var(--background-primary);
}

.view-content ::-webkit-scrollbar {
  width: 20px;
}

.view-content *::-webkit-scrollbar-thumb {
  background: var(--background-primary-alt);
  border-radius: 10px;
  border: 5px solid var(--background-primary);
}

h1::selection,
h2::selection,
h3::selection,
h4::selection {
  background: var(--red);
  color: var(--main-bg);
}

/* Needed for legacy editor */
pre.HyperMD-header.HyperMD-header-1.CodeMirror-line {
  font-size: var(--h1);
}

pre.HyperMD-header.HyperMD-header-2.CodeMirror-line {
  font-size: var(--h2);
}